<template>
    <div>
        <div class="info-container">
            <div class="info-title">
                <h3>{{imglists.title}}</h3>
            </div>
            <div class="info-subtitle">
                <span>发表时间：{{imglists.add_time | dateFormat}}</span>
                <span>点击：{{imglists.click}} 次</span>
            </div>
            <hr>
            <!-- 图片预览区 -->
            <div class="imgview">
                <!-- <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src"> -->
                <!-- <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src"> -->
                <vue-preview  :slides="list" class="ass"></vue-preview>
                <div style="clear:both;"></div>
            </div>

            <!-- 内容区 -->
            <div class="info-con" v-html="imglists.content">
            </div>
            <!-- 评论区 -->
            <comment :artid="id"></comment>
        </div>
    </div>
</template>
<script>
import comment from '../subcomponents/Comment.vue'
import { Toast } from "mint-ui"
export default{
    data(){
        return{
            id:this.$route.params.id,
            imglists:[],
            list:[]
        }
    },
    created(){
        this.getimageInfo()
        this.getthumimages()
    },
    methods:{
        getimageInfo(){
            this.$http.get('api/getimageInfo/'+this.id).then(
                response=>{
                    if(response.body.status==0){
                        this.imglists = response.body.message[0]
                        Toast({message:"获取本详情ok",duration:500})
                    }
                    else{
                        Toast({message:"获取本详情fail",duration:500})
                    }
                }
            )
        },
        getthumimages(){
            this.$http.get('api/getthumimages/'+this.id).then(
                response=>{
                    if(response.body.status==0){
                        response.body.message.forEach((item,index)=>{
                            item.w = 600;
                            item.h = 400;
                            item.msrc = item.src;
                            item.alt='picture'+ (index+1);
                            item.title = 'Image Caption' + (index+1);
                        });
                        this.list = response.body.message
                        
                        Toast({message:"获取本详情ok",duration:500})
                    }
                    else{
                        Toast({message:"获取本详情fail",duration:500})
                    }
                }
            )
        },
    },
    components:{
        comment
    }
}
</script>
<style lang="scss" >
.info-container{
    padding:5px;
    .info-title{
        h3{
            font-size:16px;
            margin:10px 0;
            color:#26a2ff;
            text-align:center;
        }
    }
    .info-subtitle{
        font-size:13px;
        color:#888;
        display:flex;
        justify-content:space-between;
    }
    .info-con{
        font-size:14px;
        line-height:22px;
        width:100%;  
    }
    .imgview{
        margin:20px 0;
        .ass{
            img{
                width:22%;
                box-shadow:0 0 5px #888;
                margin:5px;
                float:left;
            }
            figure{
                width:100%;
                margin:0;
            }
            .pswp__zoom-wrap img{
                height:auto ! important;
            }
        }
    }
    .info-con{
        img{
            width:100%;
        }
    }

}

</style>
